<template>
<!-- 试卷题目分数配置器 -->
  <el-dialog title="试卷题目分数配置器"
    style="text-align:center;z-index:9999;"
    class="modal"
    width="1000px"
    v-if="setScoreConfigDialog.open" 
    :lock-scroll="true"
    :append-to-body="true"
    :modal-append-to-body="false"
    v-loading="loading"
    :element-loading-text="loading_message"
    :visible.sync="setScoreConfigDialog.open">
    <el-form
      :model="FormData" 
      ref="ruleForm" 
      style="display:flex;flex-wrap:wrap;just-content:space-between;align-items:center"
      status-icon>
      <el-form-item style="width:50%;display:flex;just-content:space-between;align-items:center;" :error="undefined">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>试卷总分：</label>
          </span>
          <span style="width:27%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'total', 'score')}" @blur="blurEvent('total', 'score')" ref="total_score" v-model.number="FormData.total_score" autocomplete="off" >
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:50%;display:flex;just-content:space-between;align-items:center;" :error="undefined">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>当前题目总分：</label>
          </span>
          <!-- <span style="width:27%;">
            <el-input onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'now', 'score')}" ref="now_score" v-model.number="FormData.now_score"
               disabled autocomplete="off">
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span> -->
          <span style="width:40%;font-size:24px;" >
            {{FormData.now_score}}
            <span slot="suffix" style="color:#409eff;">分</span>
          </span>
        </div>
      </el-form-item>
<!-- 单选题配置 -->
      <div style="display:flex;just-content:space-evenly;align-items: center;align-content: center;width:100%;">
        <hr style="width:40%;height:1px;">
        <h3 style="width:100px;">单选题配置</h3>
        <i class="el-icon-question"></i>
        <hr style="width:35%;height:1px;">
        <span>高级</span>
        <el-switch
          v-model="switcher.single">
        </el-switch>
        &nbsp;&nbsp;&nbsp;
      </div>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_num_single">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>单选题数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'num', 'single')}"  @blur="blurEvent('num', 'single')" ref="num_single"
               v-model.number="FormData.num_single">
              <span slot="suffix" style="color:#409eff;">题</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_score_single">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>设置每题分数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'score', 'single')}"  @blur="blurEvent('score', 'single')" ref="score_single" 
              v-model.number="FormData.score_single">
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_total_judge">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>单选题总分数：</label>
          </span>
          <!-- <span style="width:40%;">
            <el-input onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'total', 'single')}"  @blur="blurEvent('total', 'single')" ref="total_single" v-model.number="FormData.total_single" disabled>
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span> -->
          
          <span style="width:40%;font-size:24px;" >
            {{FormData.num_single*FormData.score_single}}
            <span slot="suffix" style="color:#409eff;">分</span>
          </span>
        </div>
      </el-form-item>
<!-- 多选题配置 -->
      <div style="display:flex;just-content:space-evenly;align-items: center;align-content: center;width:100%;">
        <hr style="width:40%;height:1px;">
        <h3 style="width:100px;">多选题配置</h3>
        <i class="el-icon-question"></i>
        <hr style="width:35%;height:1px;">
        <span>高级</span>
        <el-switch
          v-model="switcher.single">
        </el-switch>
        &nbsp;&nbsp;&nbsp;
      </div>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_num_multiple">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>多选题数：</label>
          </span>
          <span style="width:40%;">
              <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');"  style="ime-mode:Disabled" 
                @input="(i)=>{ruleInput(i,'num', 'multiple')}"  @blur="blurEvent('num', 'multiple')" ref="num_multiple" v-model.number="FormData.num_multiple">
                <span slot="suffix" style="color:#409eff;">题</span>
              </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_score_multiple">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>设置每题分数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');"  style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'score', 'multiple')}"  @blur="blurEvent('score', 'multiple')" ref="score_multiple" v-model.number="FormData.score_multiple">
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :erroe="error_message.error_total_judge">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>多选题总分数：</label>
          </span>
          <!-- <span style="width:40%;">
            <el-input onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'total', 'multiple')}"  @blur="blurEvent('total', 'multiple')" ref="total_multiple"
               v-model.number="FormData.total_multiple" disabled>
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>-->
          <span style="width:40%;font-size:24px;" >
            {{FormData.num_judge*FormData.score_judge}}
            <span slot="suffix" style="color:#409eff;">分</span>
          </span>
        </div>
      </el-form-item>
<!-- 判断题配置 -->
      <div style="display:flex;just-content:space-evenly;align-items: center;align-content: center;width:100%;">
        <hr style="width:40%;height:1px;">
        <h3 style="width:100px;">判断题配置</h3>
        <i class="el-icon-question"></i>
        <hr style="width:35%;height:1px;">
        <span>高级</span>
        <el-switch
          v-model="switcher.single">
        </el-switch>
        &nbsp;&nbsp;&nbsp;
      </div>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_num_judge">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>判断题数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled"
              @input="(i)=>{ruleInput(i,'num', 'judge')}"  @blur="blurEvent('num', 'judge')" ref="num_judge"
               v-model.number="FormData.num_judge">
              <span slot="suffix" style="color:#409eff;">题</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_score_judge">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>设置每题分数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'score', 'judge')}"  @blur="blurEvent('score', 'judge')" ref="score_judge" 
              v-model.number="FormData.score_judge">
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" >
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>判断题总分数：</label>
          </span>
          <!-- <span style="width:40%;">
            <el-input onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'total', 'judge')}"  @blur="blurEvent('total', 'judge')" ref="total_judge" 
              v-model.number="FormData.total_judge" disabled>
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span> -->
          <span style="width:40%;font-size:24px;" >
            {{FormData.num_judge*FormData.score_judge}}
            <span slot="suffix" style="color:#409eff;">分</span>
          </span>
        </div>
      </el-form-item>
<!-- 编程题题配置 -->
      <div style="display:flex;just-content:space-evenly;align-items:center;width:100%;">
        <hr style="width:40%;height:1px;">
        <h3 style="width:100px;">编程题配置</h3>
        <i class="el-icon-question"></i>
        <hr style="width:35%;height:1px;">
        <span>高级</span>
        <el-switch
          v-model="switcher.single">
        </el-switch>
        &nbsp;&nbsp;&nbsp;
      </div>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_num_programming">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>编程题数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'num', 'programming')}" @blur="blurEvent('num', 'programming')"  ref="num_programming"
               v-model.number="FormData.num_programming">
              <span slot="suffix" style="color:#409eff;">题</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_score_programming">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>设置每题分数：</label>
          </span>
          <span style="width:40%;">
            <el-input oninput="if(value > 99 || value < 0 ){value = ''}"  onkeyup="value=value.replace(/[^\d]/g,'');" style="ime-mode:Disabled" 
              @input="(i)=>{ruleInput(i,'score', 'programming')}"  @blur="blurEvent('score', 'programming')" ref="score_programming"
               v-model.number="FormData.score_programming">
              <span slot="suffix" style="color:#409eff;">分</span>
            </el-input>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:33%;display:flex;just-content:space-between;align-items:center;" :error="error_message.error_total_programming">
        <div style="display:flex;just-content:space-between;align-items:center;">
          <span style="width:150px;">
            <label>编程题总分数：</label>
          </span>
          <span style="width:40%;font-size:24px;" >
            {{FormData.num_programming*FormData.score_programming}}
            <span slot="suffix" style="color:#409eff;">分</span>
          </span>
        </div>
      </el-form-item>
      <el-form-item style="width:100%;text-align:right">
        <el-button @click="setScoreConfigDialog.open = false">取消</el-button>
        <el-button @click="resetForm('ruleForm')">重置表单</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {BUS} from '../../javascript/functions'
export default {
  props: ['open', 'formData'],
  data () {
    return {
      loading_message: null,
      loading: false,
      setScoreConfigDialog: {
        open: false
      },
      FormData: {
      // 设置题目总分
        total_score: 100,
      // 当前题目总分
        now_score: null,
      // 单选题
        score_single: null,
        total_single: null,
        num_single: null,
      // 多选题
        score_multiple: null,
        total_multiple: null,
        num_multiple: null,
      // 判断题
        score_judge: null,
        total_judge: null,
        num_judge: null,
      // program题
        score_programming: null,
        total_programming: null,
        num_programming: null
      },
      // 验证信息 undefined表示当前input内容通过策略，为其他值时表示展示提示信息
      error_message: {
        error_score_single: undefined,
        error_num_single: undefined,
        error_total_single: undefined,
        error_score_multiple: undefined,
        error_num_multiple: undefined,
        error_total_multiple: undefined,
        error_score_judge: undefined,
        error_num_judge: undefined,
        error_total_judge: undefined,
        error_score_programming: undefined,
        error_num_programming: undefined,
        error_total_programming: undefined
      },
      switcher: {
        single: false,
        multiple: false,
        judge: false,
        subject: false
      }
    }
  },
  created () {
    // 接受打开模态框指令
    this.setScoreConfigDialog.open = this.open
  },
  mounted () {
    // 加载已有的数据
    // console.log(this.formData.singleData.length)
    this.FormData.num_single = this.formData.singleData.length
    this.FormData.score_single = this.formData.singleData[0].score
    this.FormData.num_multiple = this.formData.multipleData.length
    this.FormData.score_multiple = this.formData.multipleData[0].score
    this.FormData.num_judge = this.formData.judgeData.length
    this.FormData.score_judge = this.formData.judgeData[0].score
    this.FormData.now_score = this.FormData.total_single + this.FormData.total_multiple + this.FormData.total_judge + this.FormData.total_programming
    this.FormData.total_score = this.FormData.now_score
    // 3. 接受数据渲染的回调
    BUS.$on('scoreConfigFormDataCallBack', (e) => {
      // console.log(e)
      this.loading = false
      this.setScoreConfigDialog.open = false
    })
  },
  methods: {
    // 提交
    submit () {
      this.loading = true
      // 1. 首先验证试卷合法性
      this.loading_message = '首先验证数据合法性'
      if (this.FormData['now_score'] > this.FormData['total_score']) {
        this.loading = false
        return this.$message.warning('提数分配已经超出试卷分数上限，请合理分配分值！')
      }
      // 2. 检测试卷是否出现异常数据
      for (const key in this.FormData) {
        // console.log(key, this.FormData[key], typeof this.FormData[key], Number(this.FormData[key]))
        // if (typeof this.FormData[key] === 'string' || this.FormData[key] === '') {
        //   this.loading = false
        //   return this.$message.error('所有内容仅允许数字，不允许出现中文标点符号特殊字符等')
        // }
      }
      // 3. 判断是否存在填写分数，没有写提数的情况
      this.loading_message = '判断是否存在填写分数，没有写提数的情况'
      if (this.FormData['score_single']) {
        if (!this.FormData['num_single']) {
          this.loading = false
          return this.$message.warning('请输入单选题数')
        }
      }
      if (this.FormData['score_multiple']) {
        if (!this.FormData['num_multiple']) {
          this.loading = false
          return this.$message.warning('请输入多选题数')
        }
      }
      if (this.FormData['score_judge']) {
        if (!this.FormData['num_judge']) {
          this.loading = false
          return this.$message.warning('请输入判断题数')
        }
      }
      // 4. 判断是否存在填写提数，没有写分数的情况
      this.loading_message = '判断是否存在填写提数，没有写分数的情况'
      if (this.FormData['num_single']) {
        if (!this.FormData['score_single']) {
          this.loading = false
          return this.$message.warning('请输入单选题分数')
        }
      }
      if (this.FormData['num_multiple']) {
        if (!this.FormData['score_multiple']) {
          this.loading = false
          return this.$message.warning('请输入多选题分数')
        }
      }
      if (this.FormData['num_judge']) {
        if (!this.FormData['score_judge']) {
          this.loading = false
          return this.$message.warning('请输入判断题分数')
        }
      }
      // 5. 判断当前是否为空试卷
      this.loading_message = '判断当前是否为空试卷'
      if (this.FormData['now_score'] === null) {
        this.loading = false
        return this.$message.warning('请不要提交空表单！')
      }
      // 6. 判断题目分数是否达到了设置的总分
      if (this.FormData['now_score'] > this.FormData['total_score']) {
        this.loading = false
        return this.$message.warning('当前试题总分超过设置的分数线，请合理搭配分值')
      } else if (this.FormData['now_score'] < this.FormData['total_score']) {
        this.loading = false
        return this.$message.warning('当前试题总分低于设置的分数线，请合理搭配分值')
      }
      // 6. 事件车BUS 发送表单数据
      this.loading_message = '事件车BUS 发送表单数据'
      BUS.$emit('scoreConfigFormData', this.FormData)
    },
    // input 失去焦点 验证表单 error 控制
    blurEvent (type, key) {
      const options = {
        score: () => {
          if (this.FormData['score_' + key]) {
            if (!this.FormData['num_' + key]) {
              this.error_message['error_num_' + key] = '请填写完整'
            } else {
              if (typeof this.FormData[type + '_' + key] === 'string') {
                if (this.FormData[type + '_' + key]) {
                  return (this.error_message['error_' + type + '_' + key] = '不允许出现中文标点符号特殊字符4等')
                }
              }
              this.error_message['error_score_' + key] = undefined
            }
          } else {
            if (this.FormData['num_' + key]) {
              this.error_message['error_score_' + key] = '请填写完整'
            } else {
              if (typeof this.FormData[type + '_' + key] === 'string') {
                if (this.FormData[type + '_' + key]) {
                  return (this.error_message['error_' + type + '_' + key] = '不允许出现中文标点符号特殊字符4等')
                }
              }
              this.error_message['error_score_' + key] = undefined
            }
          }
        },
        num: () => {
          if (this.FormData['num_' + key]) {
            if (!this.FormData['score_' + key]) {
              this.error_message['error_score_' + key] = '请填写完整'
            } else {
              if (typeof this.FormData[type + '_' + key] === 'string') {
                if (this.FormData[type + '_' + key]) {
                  return (this.error_message['error_' + type + '_' + key] = '不允许出现中文标点符号特殊字符4等')
                }
              }
              this.error_message['error_num_' + key] = undefined
            }
          } else {
            if (typeof this.FormData[type + '_' + key] === 'string') {
              if (this.FormData[type + '_' + key]) {
                return (this.error_message['error_' + type + '_' + key] = '不允许出现中文标点符号特殊字符4等')
              }
            }
            this.error_message['error_score_' + key] = undefined
          }
        },
        total: () => {
        }
      }
      return options[type]()
    },
    // input 输入监听 动态计算分值
    ruleInput (e, type, key) {
      const options = {
        total: () => {},
        score: () => {
          this.FormData['total_' + key] = this.FormData['num_' + key] * this.FormData['score_' + key]
        },
        num: () => {
          this.FormData['total_' + key] = this.FormData['num_' + key] * this.FormData['score_' + key]
        },
        'now': () => {
          this.FormData['now_score'] =
          this.FormData['total_single'] +
          this.FormData['total_multiple'] +
          this.FormData['total_judge'] +
          this.FormData['total_programming']
          if (this.FormData['now_score'] > this.FormData['total_score']) {
            this.$message.warning('提数分配已经超出试卷分数上限，请合理分配分值！')
          }
        }
      }
      if (typeof this.FormData[type + '_' + key] !== 'string') {
        options[type]()
        options['now']()
      } else {
        if (this.FormData[type + '_' + key]) {
          options[type]()
          options['now']()
          return (this.error_message['error_' + type + '_' + key] = '不允许出现中文标点符号特殊字符4等')
        }
        options[type]()
        options['now']()
        return (this.error_message['error_' + type + '_' + key] = undefined)
      }
    },
    // 重置表单
    resetForm (ref) {
      // this.$refs[ref].resetField()
      for (const key in this.FormData) {
        this.FormData[key] = ''
      }
      this.FormData.total_score = 100
    }
  }
}
</script>

<style lang="less" scoped>
.el-input{
  -webkit-appearance: none;
  -moz-appearance: textfield;
  font-size: 20px;
  align-items: center;align-content: center;
}
input::input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}-webkit-outer-spin-button,
input::-webkit-inner-spin-button{
  -webkit-appearance: none !important;
}
</style>
